<template>
  <!-- 永续合约开仓页 -->
  <div class="perpetual-open">
    <div class="flex header-open">
      <div class="flex flex-1 pt-34">
        <div class="w-180 h-60 lh-60 text-center rounded inputBackground textColor">
          {{ $t("全仓") }}
        </div>
        <!-- <div class="w-80 h-60 lh-60 ml-29 rounded tabBackground textColor" style="text-align:center">1x</div> -->
        <div class="w-140 h-60 lh-60 ml-29 rounded tabBackground textColor" v-if="selectIndex / 1 === 1">
          <div @click="showOptions = !showOptions" style="height: 100%; box-sizing: border-box"
            class="relative word-30 pl-28 pr-10 w-140 h-60 select-wrap flex justify-between items-center">
            {{ form.lever_rate }}x
            <img src="../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11" />
            <div v-if="showOptions" class="options w-140 absolute top-97 left-0 z-10">
              <div class="w-full" @click.stop="handleChoose(item)" :class="{
                'option-active': form.lever_rate === item.lever_rate,
              }" :value="item.lever_rate" v-for="item in initData.lever" :key="item.id">
                {{ item.lever_rate }}x
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35" @click="jump" />
      </div>
    </div>
    <div class="pt-30 pb-20">
      <div class="flex">
        <div class="w-440 flex flex-col">
          <template v-if="selectIndex == 1">
            <div class="flex items-center h-66 rounded-lg text-grey">
              <p class="font-28 flex-1 flex items-center justify-center h-66 "
                :class="currentType == 'long' ? 'long' : ''" @click="changeTab('long')">
                {{ $t("开多") }}
              </p>
              <p class="font-28 flex-1 flex items-center justify-center h-66"
                :class="currentType == 'short' ? 'short' : ''" @click="changeTab('short')">
                {{ $t("开空") }}
              </p>
            </div>
            <div class="mt-30 mb-30" style="position: relative">
              <div class="inputBackground flex justify-between items-center w-full h-76 rounded-lg textColor"
                @click="selectBtn">
                <img src="../../assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20" />
                <div class="text-center" style="width: 80%">{{ title }}</div>
                <img src="../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
              </div>
              <div class="option-box" v-show="isShow">
                <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">
                  {{ item.title }}
                </div>
              </div>
            </div>
          </template>
          <contract-futrue v-if="selectIndex == 2 && initFutrue.para.length>0" class="mb-20" :initFutrue="initFutrue" @paraId="onParaId" />
          <!--   交割合约无数据用下面元素站位       -->
          <div  v-if="selectIndex == 2 && initFutrue.para.length<=0" style="min-height: 232px"></div>
          <div class="h-76 lh-76 inputBackground mb-30 flex pr-20 justify-center rounded-lg textColor"
            v-if="selectIndex == 1">
            <input placeholder="" class="inputBackground w-full pl-20 h-76 border-none text-left rounded-lg"
              :disabled="type / 1 === 1" @focus="focus = true" v-model="form.price" />
            <span class="ml-20">USDT</span>
          </div>
<!--          止盈止损-->
          <template v-if="checked">
            <div class="h-76 lh-76 inputBackground mb-22 flex pr-20 justify-center rounded-lg textColor">
              <span class="pl-20 w-160">{{ $t("止损价") }}</span>
              <input placeholder="" class="inputBackground w-full pl-20 h-76 border-none text-left rounded-lg flex-1"
                     @focus="focus = true" v-model="form.stop_price_loss" />
              <span class="ml-20">USDT</span>
            </div>
            <div class="h-76 lh-76 inputBackground mb-22 flex pr-20 justify-center rounded-lg textColor">
              <span class="pl-20 w-160">{{ $t("止盈价") }}</span>
              <input placeholder="" class="inputBackground w-full pl-20 h-76 border-none text-left rounded-lg flex-1"
                     @focus="focus = true" v-model="form.stop_price_profit" />
              <span class="ml-20">USDT</span>
            </div>
          </template>
          <div class="w-440 flex items-center inputBackground h-76 lh-76 rounded-lg">
            <div v-if="selectIndex == 1" class="w-80 flex items-center justify-center" style="height: 100%"
              @click="onReduce">
              <img src="../../assets/image/public/reduce.png" alt="add" class="w-30 h-6" />
            </div>
            <input :placeholder="selectIndex == 1 ? $t('张数')
              : $t('最少') + initFutrue && initFutrue.para.length>0
                ? $t('最小数量') + initFutrue.para[paraIndex].buy_min
                : ''
              " class="border-none inputBackground text-center textColor" style="width: 156px" v-model="form.amount"
              type="number" @input="onInput"/>
            <div class="w-80 flex items-center justify-center" style="height: 100%">
              <template v-if="selectIndex == 1">
                <img @click="onAdd" src="../../assets/image/public/add.png" alt="reduce" class="w-30 h-30" />
              </template>
              <template v-else>
                <span class="textColor">USDT</span>
              </template>
            </div>
          </div>
          <template v-if="selectIndex == 1">
<!--            止盈止损打开注释-->
<!--            <div class="mt-40">
              <van-checkbox v-model="checked" shape="square" :icon-size="16" checked-color="#51a490">{{ $t('止盈止损') }}</van-checkbox>
            </div>-->
            <div class="mt-40 mb-30 w-full flex justify-between items-center">
              <span class="font-22 font-400 text-grey">{{ $t("可开张数") }}</span>
              <span class="font-22 font-400 textColor">
                {{ initData.volume }}
                {{ $t("张") }}
              </span>
            </div>
            <!-- <vue-slider v-bind="options" v-model="form.amount"></vue-slider> -->
            <!-- <vue-slider class="mainBox" v-bind="options" :marks="marks" v-model="form.volume" :hide-label="true"  width="90%"
              :railStyle="{ background: '#404040', height: '4px' }"
              :processStyle="{ background: '#266BFF', height: '4px' }">
              <template v-slot:step="{ active }">
                <div :class="['custom-step', { active }]"></div>
              </template>
            </vue-slider>
            <div style="color: #868D9A" class="mt-36 font-24 w-full flex justify-between items-center">
              <span class="flex-1 text-left">0%</span>
              <span class="flex-1 text-left">25%</span>
              <span class="flex-1 text-center">50%</span>
              <span class="flex-1 text-right">75%</span>
              <span class="flex-1 text-right">100%</span>
            </div> -->
            <!-- 张数输入 -->
            <amount-slider ref="sliderRef" :maxAmount="getVolumnByLever()" @getAmount="getAmount"></amount-slider>
          </template>
          <template v-if="selectIndex == 1 && userInfo.token">
            <div class="flex justify-between mt-30">
              <div class="text-grey">{{ $t('合约金额') }}</div>
              <div class="textColor">{{ initData.amount * (form.amount / 1) * form.lever_rate }} USDT</div>
            </div>
            <div class="flex justify-between mt-30">
              <div class="text-grey">{{ $t("保证金") }}</div>
              <div class="textColor">
                {{ (initData.amount * (form.amount / 1)) | nan }} USDT
              </div>
            </div>
            <div class="flex justify-between mt-30">
              <div class="text-grey">{{ $t("建仓手续费") }}</div>
              <div class="textColor">{{ userInfo.perpetual_contracts_status === '1' ? initData.fee *
                (form.amount / 1) : initData.fee * (form.amount / 1) * form.lever_rate | nan }} USDT</div>
            </div>
          </template>
          <div class="flex font-24 text-grey justify-between mt-32" v-if="selectIndex == 2">
            <div>{{ $t("可用USDT") }}</div>
            <div class="textColor">{{ initFutrue.amount | nan }} USDT</div>
          </div>
          <div class="flex font-24 text-grey justify-between mt-20" v-if="selectIndex == 2">
            <div>{{ $t("手续费") }}</div>
            <div class="textColor">
              {{
                (
                  form.amount *
                  (initFutrue && initFutrue.para.length>0
                    ? initData.para[paraIndex].unit_fee
                    : "")
                ).toFixed(2) | nan
              }}
              USDT
            </div>
          </div>
          <template v-if="userInfo.token">
            <template v-if="selectIndex == 1">
              <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-50" v-if="currentType == 'long'"
                @click="order('long')">
                <div class="font-34 relative text-center" style="flex-grow:1;" v-if="selectIndex == 1">
                  {{ $t('开多') }}
                  <span class="right-word font-22 text-center">{{ $t('看涨') }}</span>
                </div>
                <div class="font-34 relative text-center" style="flex-grow:1;" v-else>
                  {{ $t('做多买入') }}
                </div>
              </div>
              <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-50" v-if="currentType == 'short'"
                @click="order('short')">
                <div class="relative font-34 text-center" style="flex-grow:1;" v-if="selectIndex == 1">
                  {{ $t('开空') }}
                  <span class="right-word font-22 text-center">{{ $t('看跌') }}</span>
                </div>
                <div class="relative font-34 text-center" style="flex-grow:1;" v-else>
                  {{ $t('做空买入') }}
                </div>
              </div>
            </template>
            <template v-if="selectIndex == 2">
              <div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-30 " @click="order('open')"
                v-if="userInfo.token">
                <div class="font-34 relative text-center" style="flex-grow: 1">
                  {{ $t("开多") }}
                  <span class="right-word font-22 text-center">{{
                    $t("看涨")
                  }}</span>
                </div>
              </div>
              <div class="w-full h-80 lh-80 bg-red flex text-white rounded-md mt-20 mb-10" style="position: relative;"
                :class="{ 'mt-22': selectIndex == 2 }" @click="order('close')" v-if="userInfo.token">
                <div class="relative font-34 text-center" style="flex-grow: 1">
                  {{ $t("开空") }}
                  <span class="right-word font-22 text-center">{{
                    $t("看跌")
                  }}</span>
                </div>
              </div>
            </template>
          </template>
          <div v-else class="w-full mt-120">
            <div class="textColor">
              <p>{{ $t("套期保值，风险对冲") }}</p>
              <p class="pt-8">{{ $t("登陆后继续") }}</p>
            </div>
            <div class="h-80 lh-80 btnBackground flex text-white rounded-md justify-center mt-50"
              @click="$router.push('/login')">
              {{ $t("登录后进行交易") }}
            </div>
          </div>
        </div>
        <div class="ml-30">
          <div class="w-290 flex justify-between text-grey font-22">
            <div>
              <div>{{ $t("价格") }}</div>
              <div class="mt-4">(USDT)</div>
            </div>
            <div class="text-right items-end justify-end">
              <div class="">{{ $t("数量") }}</div>
              <div class="mt-4">({{ symbol.toUpperCase() || "--" }})</div>
            </div>
          </div>
          <div v-if="showType == 0 || showType == 1" class="w-290 flex justify-between pt-12 font-26"
            v-for="(item, index) in greenData" :key="index" @click="onQuickPrice(item.price)" :style="{
              background:
                `linear-gradient(to right,${theme == 'dark' ? '#121212' : '#ffffff'
                } 0%` +
                (1 - item.amount / greenData[greenData.length - 1].amount) *
                100 +
                '%,rgba(94,186,137,.1) ' +
                (1 - item.amount / greenData[greenData.length - 1].amount) *
                100 +
                '%,rgba(94,186,137,.1) 100%)',
            }">
            <div class="text-green">{{ item.price }}</div>
            <div class="text-right textColor" v-if="symbol == 'shib'">
              {{ fixDate(item.amount, $i18n) || "--" }}
            </div>
            <div class="text-right textColor" v-else>
              {{ item.amount || "--" }}
            </div>
          </div>
          <div class="text-red pt-16 font-34 font-700 text-center">{{ price || '--' }}
          </div>
          <div class="pb-10 font-20 text-center textColor1">≈{{ ((price *
            currency.rate).toFixed(price.toString().split('.')[1] ?
              price.toString().split('.')[1].length : 2)) || '--' }}</div>
          <div v-if="showType == 0 || showType == 2" class="w-290 flex justify-between pt-12 font-26"
            v-for="(item, index) in redData" :key="item + index" @click="onQuickPrice(item.price)" :style="{
              background:
                `linear-gradient(to right,${theme == 'dark' ? '#121212' : '#ffffff'
                } 0%` +
                (1 - item.amount / greenData[greenData.length - 1].amount) *
                100 +
                '%,rgba(246,70,93,.1) ' +
                (1 - item.amount / greenData[greenData.length - 1].amount) *
                100 +
                '%,rgba(246,70,93,.1) 100%)',
            }">
            <div class="text-red">{{ item.price }}</div>
            <div class="text-right textColor" v-if="symbol == 'shib'">
              {{ fixDate(item.amount, $i18n) || "--" }}
            </div>
            <div class="text-right textColor" v-else>
              {{ item.amount || "--" }}
            </div>
          </div>
          <div class="flex k-select-box">
            <div class="mt-30 mb-30 select-box" style="position: relative">
              <div class="flex justify-between items-center w-full h-70" @click="selectArryBtn">
                <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
                <div class="pl-16 textColor" style="width: 80%">
                  {{ dataArrTitle }}
                </div>
                <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
              </div>
              <div class="option-box" v-show="arryIsShow">
                <div class="font-30" v-for="(item, index) in selectDataArry" :key="index" @click="selectItemArry(item)">
                  {{ item.name }}
                </div>
              </div>
            </div>
            <div @click="isSelectShow = true">
              <img src="@/assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="show" class="rounded-2xl">

      <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
        @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" />
    </van-popup>
    <van-action-sheet v-model="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"
      close-on-click-action @cancel="onCancel">
    </van-action-sheet>
  </div>
</template>

<script>
import config from "@/config";
import { Popup, ActionSheet,Checkbox } from "vant";
import { mapGetters } from "vuex";
// import VueSlider from "vue-slider-component";
import AmountSlider from "./amountSlider.vue";
import "vue-slider-component/theme/default.css";
import {
  _orderOpen,
  _orderClose,
  _futrueOrder,
  _futrueOrderDetail,
  _getBalance,
  _futrueOrderInit,
} from "@/API/trade.api";
import ContractFutrue from "@/components/contract-futrue";
import PopupDelivery from "@/components/popup-delivery";
import { fixDate } from "@/utils/utis";
import { _getHomeList } from "@/API/home.api";
import { getStorage } from '@/utils/utis'
// import PopupConfirmOrder from '@/components/popup-confirm-order'
export default {
  name: "perpetualPosition",
  components: {
    // VueSlider,
    AmountSlider,
    ContractFutrue,
    [Popup.name]: Popup,
    PopupDelivery,
    [ActionSheet.name]: ActionSheet,
    // PopupConfirmOrder,
    [Checkbox.name]: Checkbox,
  },
  props: {
    greenData: {
      // 买单
      type: Array,
      default() {
        return [];
      },
    },
    redData: {
      // 卖单
      type: Array,
      default() {
        return [];
      },
    },
    symbol: {
      type: String,
      default: "",
    },
    price: {
      type: [Number, String],
      default: "0.00",
    },
    initOpen: {
      type: Object,
      default() {
        return {};
      },
    },
    initClose: {
      type: Object,
      default() {
        return {};
      },
    },
    initFutrue: {
      type: Object,
      default() {
        return {};
      },
    },
    selectIndex: {
      type: [String, Number],
      default: 1,
    },
    currentType: {
      type: String,
      default: "long",
    },
  },
  watch: {
    price(val) {
      if (this.type === "1") {
        // !this.focus &&
        this.form.price = val;
      }
      this.form.para_id =
        this.initFutrue.para && this.initFutrue.para[this.paraIndex].para_id; // 不优雅，不可靠
      // this.form.symbol = this.symbol.toLowerCase()
    },
    initOpen: {
      // 处理滚动条初始值
      deep: true,
      handler(val) {
        this.handleInitSliderOption();
      },
    },
    initClose: {
      // 处理滚动条初始值
      deep: true,
      handler(newVal, oldVal) {
        if (newVal.amount / 1 > 0) {
          this.handleInitSliderOption(true);
        }
      },
    },
    symbol(val) {
      this.getHomeList(val);
    },
    greenData(val) {
      if (this.dataArrValue >= 1) {
        this.greenData.map((item) => {
          item.price = parseFloat(item.price).toFixed(this.dataArrValue);
        });
        this.redData.map((item) => {
          item.price = parseFloat(item.price).toFixed(this.dataArrValue);
        });
      } else {
        if (this.dataArrValue == -1) {
          this.greenData.map((item) => {
            item.price = item.price.substring(0, item.price.indexOf("."));
          });
          this.redData.map((item) => {
            item.price = item.price.substring(0, item.price.indexOf("."));
          });
        }
        if (this.dataArrValue == -2) {
          this.greenData.map((item) => {
            item.price =
              item.price.substring(0, item.price.indexOf(".") - 1) + "0";
          });
          this.redData.map((item) => {
            item.price =
              item.price.substring(0, item.price.indexOf(".") - 1) + "0";
          });
        }
        if (this.dataArrValue == -3) {
          this.greenData.map((item) => {
            item.price =
              item.price.substring(0, item.price.indexOf(".") - 2) + "00";
          });
          this.redData.map((item) => {
            item.price =
              item.price.substring(0, item.price.indexOf(".") - 2) + "00";
          });
        }
      }
    },
  },
  mounted() {
    this.getHomeList(this.$route.params.symbol);
    this.form.price = this.price
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/userInfo',
      theme: 'home/theme',
      currency: 'home/currency'
    }),
    initData() {
      let obj = null
      if (this.selectIndex / 1 === 1) {

        obj = this.initOpen
        if (!obj.lever || !obj.lever.length) { // 倍数
          obj.lever = [{ id: 1, lever_rate: 1 }]
        }
        return obj
      }
      return this.initFutrue
    },
    coudBuyVolume() {
      // 可买数量
      return Math.floor(this.initOpen.volume / 1 / this.form.lever_rate);
    },
  },
  filters: {
    nan(val) {
      return isNaN(val) ? "--" : val;
    },
  },
  data() {
    return {
      fixDate,
      currentBuyType: "", // 交割合约当前下单的类型，用于弹窗倒计时结束以后，点击再下一单
      timeout2: null,
      timeout: null,
      detailData: {}, // 交割合约订单详情数据
      show: false,
      popType: "confirm", // 弹框类型 confirm / counting
      showOptions: false,
      options: config.sliderOptions,
      value: 0,
      isShow: false,
      title: this.$t("市价"),
      paraIndex: 0,
      selectData: [
        { title: this.$t("市价"), type: "1" },
        { title: this.$t("限价"), type: "2" },
      ],
      form: {
        symbol: "", // 币种
        session_token: "",
        direction: "buy", // 买or卖
        price_type: "opponent", // 市价or限价
        lever_rate: 1, // 杠杆
        price: "",
        amount: "", // 数量
        para_id: "", // 交割周琦id
      },
      focus: false,
      type: "1", //选中市价或限价类型
      // currentType:"open", //开仓类型
      // action: _orderOpen // 开仓or
      selectDataArry: [],
      isSelectShow: false,
      actions: [
        { name: this.$t("默认"), value: 0, className: 'actions-active' },
        { name: this.$t("展示买单"), value: 1, className: '' },
        { name: this.$t("展示卖单"), value: 2, className: '' },
      ],
      showType: 0,
      dataArrTitle: 0,
      dataArrValue: 0,
      arryIsShow: false,
      marks: (val) => val % 50 === 0,
      stop_price_loss: "",
      stop_price_profit: "",
      checked:false,
    };
  },
  beforeDestroy() {
    this.clearTimeout();
  },
  activated() {
    this.selectData = [
      { title: this.$t("市价"), type: "1" },
      { title: this.$t("限价"), type: "2" },
    ];
    this.title = this.selectData[0].title;
    this.type = this.selectData[0].type
    this.actions = [
      { name: this.$t("默认"), value: 0, className: 'actions-active' },
      { name: this.$t("展示买单"), value: 1, className: '' },
      { name: this.$t("展示卖单"), value: 2, className: '' },
    ]
  },

  methods: {
    //获取张数
    getAmount(val) {
      this.form.amount = val;
    },
    // 获取张数,数据转换
    getVolumnByLever() {
      let vol;
      vol = this.initOpen.volume / 1;
      return Math.floor(vol);
    },

    getHomeList(symbol) {
      _getHomeList(symbol).then((res) => {
        let numberText = res[0].close;
        let numberLength = numberText.substring(
          numberText.indexOf(".") + 1,
          numberText.length
        ).length;
        let arry = [];
        let str = "0.";
        for (let j = 0; j < numberLength - 1; j++) {
          str = str + "0";
          arry.push(str);
        }
        let newArry = [];
        arry.map((item) => {
          let obj = {
            name: item + "1",
            value:
              item.substring(item.indexOf(".") + 1, item.length).length + 1,
          };
          newArry.push(obj);
        });
        if (numberLength <= 2) {
          let obj = [
            {
              name: "0.1",
              value: 1,
            },
            {
              name: "1",
              value: -1,
            },
            {
              name: "10",
              value: -2,
            },
            // {
            //   name: '100',
            //   value: -3,
            // }
          ];
          let arryItem = {
            name: "100",
            value: -3,
          };
          if (numberText.substring(0, numberText.indexOf(".")).length > 2) {
            obj.push(arryItem);
          }
          newArry = newArry.concat(obj);
        }
        if (this.symbol == "shib") {
          newArry = newArry.slice(-4);
        }
        let dataObj = {
          arry: newArry,
          numberLength: numberLength,
        };
        this.selectDataArry = dataObj.arry;
        if (numberLength >= 2) {
          this.dataArrTitle = this.selectDataArry[0].name;
        } else {
          this.dataArrTitle =
            this.selectDataArry[this.selectDataArry.length - 1].name;
        }
      });
    },
    continueTobuy(detailData) {
      this.show = false;
      setTimeout(() => {
        this.$router.push(
          `/trendDetails/${detailData.symbol}?direction=${detailData.direction}`
        );
      }, 300);
    },
    onQuickPrice(price) {
      // 点击金额变化
      if (this.type === "2") {
        this.form.price = price;
      }
    },
    clearTimeout() {
      clearTimeout(this.timeout);
      this.timeout = null;
    },
    handleTimeEnd(order) {
      if (this.selectIndex / 1 === 2) {
        // 交割合约需要弹出详情框
        _futrueOrderDetail(order).then((data) => {
          this.clearTimeout();
          this.detailData = data;
          if (data.state !== "created") {
            this.timeout = setTimeout(() => {
              this.handleTimeEnd(order);
            }, 1000);
          }
        });
      }
    },
    handleInitSliderOption(amount) {
      if (!amount) {
        // 金额是否需要变动
        this.form.amount = "";
      }
      // console.log(this.initOpen.volume, this.form.lever_rate);
      let vol;
      vol = this.initOpen.volume / 1;
      this.options.max = Math.floor(vol);
      // console.log("this.options.max", this.options.max);
      if (this.options.max > 0) {
        this.options.disabled = false;
      } else {
        this.options.disabled = true;
      }
    },
    handleChoose(item) {
      this.showOptions = !this.showOptions;
      this.form.lever_rate = item.lever_rate;
      // console.log("handleChoose");
      this.handleInitSliderOption();
    },
    onAdd() {
      // +
      if (this.options.max === 0) {
        return;
      }
      if (this.form.amount === this.options.max) {
        return;
      }
      // console.log(this.options.max)
      this.form.amount++;
    },
    onReduce() {
      // -
      if (this.form.amount > 1) {
        this.form.amount--;
      }
    },
    jump() {
      this.$router.push(`/trendDetails/${this.symbol}`);
    },
    onParaId({ id, index }) {
      // 交割日期
      // console.log(evt)
      this.form.para_id = id;
      this.form.amount = ''
      this.paraIndex = index;
    },
    onInput() {
      // 数量变化
      // console.log(1111111, this.form.amount, this.selectIndex)
      if (this.selectIndex == 1 && this.options.max == 0) {
        this.form.amount = this.form.amount / 1;
      } else if (
        this.selectIndex == 1 &&
        this.form.amount / 1 > this.options.max / 1
      ) {
        this.form.amount = this.options.max / 1;
      }
      if (this.selectIndex / 1 === 1) {
        this.$refs.sliderRef.amountChange(this.form.amount);
      }
    },
    //价格类型下拉框切换
    selectBtn() {
      this.isShow = !this.isShow;
    },
    //选择价格类型
    selectItem(item) {
      if (item.type == 1) {
        this.form.price = this.price
      }
      this.form.price_type = item.type === "1" ? "opponent" : "limit";
      this.title = item.title;
      this.type = item.type;
      this.isShow = false;
    },
    //选择开仓类型
    changeTab(type) {
      // 开仓和
      // console.log("changeTab", type);

      if (this.currentType === type) {
        return;
      }
      this.$emit("changeCurrentType", type);
      // this.currentType = type;

      this.$refs.sliderRef.emptyValue()
      this.handleInitSliderOption();
    },
    onClose() {
      // 关闭
      this.show = false;
      setTimeout(() => {
        this.popType = "confirm";
      }, 500);
    },
    // onOrderConfirm() {
    //   /// 交割合约确认
    //   this.show = false;
    //   this.popType = "counting";
    //   this.order(this.form.direction === "buy" ? "open" : "close");
    // },
    order(type) {
      if (!this.userInfo.token) {
        this.$router.push("/login");
        return false;
      }
      if (!this.form.amount) {
        if (this.selectIndex == 1) {
          this.$toast.fail(this.$t("请输入合约张数"));
        } else {
          this.$toast.fail(this.$t("请输入金额"));
        }
        return;
      }

      // this.form.direction = type
      this.form.symbol = this.symbol;
      if (type == 'long' || type == 'open') {
        this.form.direction = 'buy'
      } else {
        this.form.direction = 'sell'
      }
      let _order = null; // api
      let emitFunc = null; // 触发函数
      if (this.selectIndex / 1 === 1) {
        // 永续合约
        this.form.session_token = this.initOpen.session_token
        _order = _orderOpen
        emitFunc = this.currentType
        this.openOrder(_order, emitFunc);
      } else {
        // 交割合约
        this.form.session_token = this.initFutrue.session_token;
        _order = _futrueOrder;
        emitFunc = "futrue";
        if (
          this.initFutrue.session_token == undefined ||
          this.initFutrue.session_token == ""
        ) {
          _futrueOrderInit(this.symbol)
            .then((data) => {
              this.form.session_token = data.session_token;
              this.openOrder(_order, emitFunc);
            })
            .catch((err) => {
              if (err.code == "ECONNABORTED") {
                this.$toast(this.$t("网络超时！"));
              } else if (err.msg != undefined) {
                this.$toast(this.$t(err.msg));
              }
            });
        } else {
          this.form.session_token = this.initFutrue.session_token;
          this.openOrder(_order, emitFunc);
        }
      }
    },
    openOrder(_order, emitFunc) {
      _order(this.form)
        .then((res) => {
          if (this.selectIndex / 1 === 1) {
            this.$refs.sliderRef.emptyValue()
          }
          this.$toast(this.$t("操作成功"));
          this.form.stop_price_loss = "";
          this.form.stop_price_profit = "";
          _getBalance().then((data) => {
            // 刷新余额
            this.$store.commit("user/SET_USERINFO", { balance: data.money });
          });
          this.$emit("ordered", emitFunc);
          if (this.selectIndex / 1 === 2) {
            // 交割合约需要弹出详情框
            _futrueOrderDetail(res.order_no).then((data) => {
              this.detailData = data;
              this.show = true;
            });
          }
        })
        .catch(() => {
          // 也需要重新初始化
          this.$emit("ordered", emitFunc);
          if (this.selectIndex / 1 === 1) {
            this.$refs.sliderRef.emptyValue()
          }
        });
    },
    selectArryBtn() {
      this.arryIsShow = !this.arryIsShow;
    },
    onSelect(item) {
      this.actions.map((item) => {
        item.className = ''
      })
      item.className = 'actions-active'
      this.showType = item.value;
      this.$emit("changeValueBack", this.showType);
    },
    onCancel() {
      this.isSelectShow = false;
    },
    selectItemArry(item) {
      this.dataArrValue = item.value;
      this.arryIsShow = false;
      this.dataArrTitle = item.name;
    },
  },
};
</script>

<style lang="scss" scoped>
.perpetual-open {
  font-size: 26px;
}

.options {
  box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3);
  border-radius: 6px;

  @include themify() {
    background: themed("tab_background");
  }

  div {
    font-size: 22px;
    text-align: center;
    width: 140px;
    height: 50px;
    line-height: 50px;

    &.option-active {
      @include themify() {
        background: themed("tab_background");
      }
    }
  }
}

.right-word {
  top: 50%;
  transform: translateY(-50%);
  right: 19px;
  position: absolute;
  border-radius: 6px;
}

.vue-slider {
  height: 3px !important;
  padding: 0 20px !important;
}

.vue-slider-dot {
  width: 32px !important;
  height: 32px !important;
}

.vue-slider-mark-label {
  font-size: 16px;
  margin-top: 14px !important;
}

.vue-slider-mark-label-active {
  color: #868d9a !important;
}

.vue-slider-dot-handle {
  border: 3px solid #2c78f8;
}

.vue-slider-mark {
  width: 20px !important;
  height: 20px !important;

  &:nth-child(1) {
    .vue-slider-mark-label {
      transform: translateX(-14px) !important;
    }
  }

  &:nth-child(5) {
    .vue-slider-mark-label {
      transform: translateX(-60px) !important;
    }
  }
}

// 开仓样式
.tabcon {
  // padding-bottom: 16%;
  position: relative;
  height: 80px;
}

.tab {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  display: flex;
  align-items: center;
  background-color: #f3f3f3;
  border-radius: 5px;
  overflow: hidden;
}

.tab>* {
  height: 100%;
}

.tab>img {
  margin-left: -2px;
  margin-right: -2px;
}

.tab>a {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.open,
.long {
  background-color: #12b298;
  color: white;
}

// 下拉
.option-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 90px;
  width: 100%;

  @include themify() {
    background: themed("grey_bg");
  }

  text-align: center;

  @include themify() {
    box-shadow: 0px 0px 3px 3px themed("grey_bg");
  }

  border-radius: 4px;

  @include themify() {
    color: themed("text_color3");
  }
}

.option-box>div {
  padding: 30px 0;
}

.option-box>div:hover {
  // background-color: #f5f5f5;
}

.num-text-color {
  color: #4c4a54;
}

select {
  appearance: none;
  /* 去掉默认图标 */
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  padding: 0 20px 0 20px;
  background: url("../../assets/image/public/grey-select.png") no-repeat scroll right center transparent;
  /* 自己的图*/
  background-size: 20px 11px;
}

.with100 {
  width: 100%;
}

.height100 {
  height: 100%;
}

.open {
  background-color: #12b298;
  // background: url(@/assets/image/public/open-bg.png) no-repeat right center;
  // background-size: 100% 100%;
  color: white;
}

.close,
.short {
  background-color: #f6465d;
  // background: url(@/assets/image/public/close-bg.png) no-repeat left center;
  // background-size: 100% 100%;
  color: white;
}

// .custom-step {
//   width: 10px;
//   height: 10px;
//   border-radius: 50%;
//   background: fff;
//   border: solid 1px #1d91ff;
//   background: #fff;
// }

// .custom-step.active {
//   box-shadow: 0 0 0 2px #1d91ff;
//   background-color: #1d91ff;
// }

.all-div {
  @include themify() {
    background: themed("input_background1");
  }
}

.select-wrap {
  @include themify() {
    background: themed("input_background1");
  }

  border: none;
}

.greyBg {
  @include themify() {
    border: 1px solid themed("input_background1");
  }

  @include themify() {
    background: themed("input_background1");
  }
}

.usdt-bg {
  @include themify() {
    background: themed("input_background1");
  }
}

.header-open {
  align-items: center;
}

.k-select-box {
  justify-content: flex-end;
  padding-right: 40px;
  align-items: center;

  .select-box {
    width: 220px;

    @include themify() {
      background: themed("input_background");
    }

    margin-right: 20px;
  }
}

.van-popup {
  @include themify() {
    background: themed("input_background1");
  }
}

::v-deep .van-popup {
  @include themify() {
    background: themed("input_background1");
  }
}

.actions-active {
  @include themify() {
    background: themed("color_main") !important;
  }

  color: #fff !important;
}

.perpetual-open {

  ::v-deep .van-action-sheet__item,
  ::v-deep .van-action-sheet__cancel {

    @include themify() {
      background: themed("input_background1");
    }

    @include themify() {
      color: themed("text_color");
    }
  }

  ::v-deep .van-action-sheet__gap {
    @include themify() {
      background: themed("cont_background");
    }
  }
}

.approximately-text {
  @include themify() {
    color: themed("text_color1");
  }
}
</style>
